@import "@/common/styles/colors"

.dropdown
  visibility: visible
  opacity: 1
  transition: opacity 0.1s linear
  user-select: none

.dropdown-content
  float: right
  margin-right: 10%
  display: inline-block
  position: absolute
  width: auto
  overflow: auto
  border-radius: 10px
  box-shadow: 0 8px 16px 0 $dark-gray
  border: 1px solid $light-gray
  right: 0
  z-index: 1
  padding: 15px
  background-color: $dark-gray

.dropdown-invisible
  visibility: hidden
  opacity: 0
  transition: visibility 0s 0.1s, opacity 0.1s linear

.dropdown-content h2
  color: $subtext
  margin: 0
  font-size: 16pt

.dropdown-hr
  border: 1px solid $light-gray
  margin: 5px
  width: 30px

.dropdown-entries
  margin-top: 10px
  display: flex
  flex-direction: column

.dropdown-item
  margin: 5px 10px
  display: flex
  align-items: center
  cursor: pointer
  color: $white

.dropdown-item *
  margin: 0
  font-size: 16pt
  font-weight: 500

.dropdown-item:hover
    color: $green

.dropdown-item svg
  width: 25px
  height: 25px

.dropdown-item h3
  margin-left: 15px

.center
  display: flex
  justify-content: center

@media (max-width: 390px)
  .dropdown-content
    margin-right: 0